<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Curves</title>
    <script type="text/javascript" src="//requirejs.org/docs/release/2.1.16/minified/require.js"></script>
</head>
<body style='background:-webkit-gradient(linear,0 0, 0 100%, color-stop(0,black), color-stop(0.8, rgb(150,150,150)), color-stop(1, rgb(200,200,200)))'>
    <div id="Main" style="width:600px;height:400px;"></div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    var w = 1280;
    var h = 800;
    var pi = Math.PI;
    var main = document.getElementById('Main');



    main.style.width = w + 'px';
    main.style.height = h + 'px';

    require(['zrender','zrender/graphic/shape/Rose','zrender/graphic/shape/Trochoid'], function(zrender, RoseShape, TrocholdShape){
            var zr = zrender.init( main );

            var N = 10;
            var color = require('zrender/tool/color');
            var colorId = 0;

            for (var i = 0; i < N ; i ++) {
                createShape(i);
            }

            function createShape(i) {
                var ShapeClass = ( i % 5 == 0 ) ? TrocholdShape : RoseShape;
                var r = ( i % 5 == 0 ) ? random(50, 20) : [random(100, 30)];

                var shape = new ShapeClass({
                    position: [random(w), random(h)],
                    shape: {
                        cx: 0,
                        cy: 0,
                        r: r,
                        r0: random(20, 10),
                        d: random(100),
                        k: random(10),
                        n: random(5),
                        location: ['in', 'out'][i % 2]
                    },
                    style: {
                        lineWidth: 1,
                        stroke:  color.getColor(colorId ++)
                    },
                    rotation: pi * 2 / random(360),
                    hoverable: false,
                    draggable: false
                });
                zr.add(shape);
                animate(shape);
            }

            function animate(shape) {
                var time = random(1000, 100);
                var type = shape.type =='rose' ? random(6) : random(3);
                var easing = [
                    'Linear', 'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',
                    'CubicIn', 'CubicOut', 'CubicInOut', 'QuarticIn', 'QuarticOut',
                    'QuarticInOut', 'QuinticIn', 'QuinticOut', 'QuinticInOut',  'SinusoidalIn',
                    'SinusoidalOut', 'SinusoidalInOut', 'ExponentialIn', 'ExponentialOut',
                    'ExponentialInOut', 'CircularIn', 'CircularOut', 'CircularInOut',
                    'ElasticIn', 'ElasticOut', 'ElasticInOut', 'BackIn', 'BackOut',
                    'BackInOut', 'BounceIn', 'BounceOut', 'BounceInOut'
                    ][0]//[random(30)];

                var move = shape.animate('');

                switch (type) {
                    case 0 :
                        move.when(time, {
                            scale : [random(3, 1), random(3, 1)]
                        });
                        break;
                    case 1 :
                        move.when(time, {
                            position : [random(w), random(h)]
                        });
                        break;
                    case 2 :
                        move.when(time, {
                            rotation : pi * 2 * random(10, 1)
                        });
                        break;
                    case 3 :
                        move = shape.animate('shape').when(time, {
                            r : [random(100, 30)]
                        });
                        break;
                    case 4 :
                        move = shape.animate('shape').when(time, {
                            k : random(10)
                        });
                        break;
                    case 5 :
                        move = shape.animate('shape').when(time, {
                            n : random(5)
                        });
                        break;
                }

                move.done(function() {
                        animate(shape);
                    })
                    .start(easing);
            }
        })

        function random(max, min) {
            var min = min || 0;
            return Math.floor(Math.random() * (max - min)) % (max - min) + min;
        }
    </script>

</body>
</html>